import {Link, useNavigate} from 'react-router-dom'
import {Card, Breadcrumb, Form, Button, Radio, DatePicker, Select, Popconfirm, message} from 'antd'
import locale from 'antd/es/date-picker/locale/zh_CN'

import {Table, Tag, Space} from 'antd'
import {EditOutlined, DeleteOutlined} from '@ant-design/icons'
import img404 from '@/assets/error.png'
import {useEffect, useState} from "react";
import {http} from "@/utils/request";
import {delArticleAPI, getArticleListAPI} from "@/apis/article";

const {Option} = Select
const {RangePicker} = DatePicker


const Article = () => {
    // 准备列数据
    const columns = [
        {
            title: '封面',
            dataIndex: 'cover',
            width: 120,
            render: cover => {
                return <img src={cover.images[0] || img404} width={80} height={60} alt=""/>
            }
        },
        {
            title: '标题',
            dataIndex: 'title',
            width: 220
        },
        {
            title: '状态',
            dataIndex: 'status',
            // render: data => <Tag color="green">审核通过</Tag>
            render: data => data === 2 ? <Tag color="green">审核通过</Tag> : <Tag color="red">待审核</Tag>
        },
        {
            title: '发布时间',
            dataIndex: 'pubdate'
        },
        {
            title: '阅读数',
            dataIndex: 'read_count'
        },
        {
            title: '评论数',
            dataIndex: 'comment_count'
        },
        {
            title: '点赞数',
            dataIndex: 'like_count'
        },
        {
            title: '操作',
            render: data => {
                return (
                    <Space size="middle">
                        <Button
                            type="primary"
                            shape="circle"
                            icon={<EditOutlined/>}
                            onClick={() => navagite(`/publish?id=${data.id}`)}/>
                        <Popconfirm
                            title="确认要删除该文章吗？"
                            onConfirm={() => onDelete(data.id)}
                            okText="是"
                            cancelText="否"
                        >
                            <Button
                                type="primary"
                                danger
                                shape="circle"
                                icon={<DeleteOutlined/>}
                            />
                        </Popconfirm>
                    </Space>
                )
            }
        }
    ]

    const navagite = useNavigate()
    // 准备表格body数据
    const data = [
        {
            id: '8218',
            comment_count: 0,
            cover: {
                images: [],
            },
            like_count: 0,
            pubdate: '2019-03-11 09:00:00',
            read_count: 2,
            status: 2,
            title: 'wkwebview离线化加载h5资源解决方案'
        }
    ]

    // 获取频道列表
    const [channels, setChannels] = useState([])
    useEffect(() => {
        async function fetchChannels() {
            const res = await http.get('/channels');
            setChannels(res.data.channels)
        }

        fetchChannels()
    }, [])

    // 文章列表数据管理
    const [articleList, setArticleList] = useState({
        list: [],
        count: 0
    })
    const [params, setParams] = useState({
        page: 1,
        per_page: 4,
        begin_pubdate: null,
        end_pubdate: null,
        status: null,
        channel_id: null
    })
    const [count, setCount] = useState(0)
    useEffect(() => {
        // console.log(params)
        const getList = async () => {
            const res = await getArticleListAPI(params)
            const {results, total_count} = res.data
            setArticleList({
                list: results,
                count: total_count
            })
            setCount(res.data.total_count)
        };
        getList()
        // 当params变化时发起请求
    }, [params])

    // 删除文章
    const onDelete = async id => {
        console.log(id)
        await delArticleAPI(id)
        await setParams({
            ...params,
        })
        message.success('删除成功')
    };

    // 重新提交表单数据
    const onFinish = value => {
        setParams({
            ...params,
            channel_id: value.channel_id,
            status: value.status,
            begin_pubdate: value.date[0]?.format('YYYY-MM-DD'),
            end_pubdate: value.date[1]?.format('YYYY-MM-DD')
        })
    };

    // 分页方法
    const onPageChange = page => {
        setParams({
            ...params,
            page
        })
    };

    return (
        <div>
            <Card
                title={
                    <Breadcrumb items={[
                        {title: <Link to={'/'}>首页</Link>},
                        {title: '文章列表'},
                    ]}/>
                }
                style={{marginBottom: 20}}
            >
                <Form initialValues={{status: ''}} onFinish={onFinish}>
                    <Form.Item label="状态" name="status">
                        <Radio.Group>
                            <Radio value={''}>全部</Radio>
                            <Radio value={0}>草稿</Radio>
                            <Radio value={2}>审核通过</Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item label="频道" name="channel_id">
                        <Select
                            placeholder="请选择文章频道"
                            style={{width: 120}}
                        >
                            {/*<Option value="jack">Jack</Option>*/}
                            {/*<Option value="lucy">Lucy</Option>*/}
                            {channels.map(item => (
                                <Option key={item.id} value={item.id}>
                                    {item.name}
                                </Option>
                            ))}
                        </Select>
                    </Form.Item>

                    <Form.Item label="日期" name="date">
                        {/* 传入locale属性 控制中文显示*/}
                        <RangePicker locale={locale}></RangePicker>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" style={{marginLeft: 40}}>
                            筛选
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
            {/*表格区域*/}
            <Card title={`根据筛选条件共查询到 ${articleList.count} 条结果：`}>
                <Table rowKey="id" columns={columns} dataSource={articleList.list} pagination={{
                    total: articleList.count,
                    pageSize: params.per_page,
                    onChange: onPageChange
                }}/>
            </Card>
        </div>
    )
}

export default Article